<script lang="ts" setup >
import { ref, getCurrentInstance, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'


import  store1 from "../../store/index"
let store:any = store1()
let { proxy }: any = getCurrentInstance()
const input1 = ref("")


async function searcher() {
    // 发送搜索的请求，把搜索结果写入菠萝
    // console.log(input1.value)
    let search_word = input1.value
    let search_table = store.nav
    let res = await proxy.$axios('/searcher', { params: { search_word , search_table} })
    console.log(res.data, 6666)
    store.search_res=res.data
    console.log(store.search_res, "pinia")	
}
</script>

<template>
    <!-- <el-row type="flex" class="row-bg" justify="center"> -->
    <el-row class="row-bg" style="background-color:white">
        <el-col :span="3" :offset="2" style="background-color:white">
            <a href="http://localhost:8080" class="logo" style="background-color:white">
                <div class="icon" style="background-color:white"></div>
            </a>
        </el-col>
        <el-col :span="8" style="background-color:white">
            <div>
                <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="文章/疾病/医生/药品/医院"
                    :prefix-icon="Search" style="background-color:white" @keyup.enter.native="searcher" />
            </div>
        </el-col>
        <el-col :span="7" style="background-color:white">
            <el-button type="success" size="large" style="padding: 12px 42px;" class="btn" @click="searcher"><span
                    class="search">搜索</span>
            </el-button>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
.el-row {
    padding: 30px 0 !important;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    height: 46px;
    // background-color: grey;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.logo {
    // margin-top: 5px;
    // padding-right: 10px;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;

    .icon {
        height: 35px;
        width: 130px;
        background-size: cover;
        background-image: url(./src/logo.png);
    }
}

.btn:hover {
    .search {
        background-color: rgb(149, 212, 117);
    }
}
</style>
<style>
.el-row {
    margin-bottom: 0 !important;
    /* background-color: white !important; */
}

.search {
    color: white;
    background-color: rgb(103, 194, 58);
}


.el-input__prefix-inner {
    background-color: white;
}

.el-input .el-input__icon,
.el-icon svg {
    background-color: white;
}
</style>